<template>
	<view class="income">
		<view class="box">
			<view class="income-top">
				<span class="text one">在投品</span>
				<span class="text two">投流费(元)</span>
				<span class="text three">有效成交(笔)</span>
				<span class="text four">收益(元)</span>
			</view>
			<view class="income-bottom">
				<view class="income-list" v-for="(item,index) in data" :key="item.id">
					<image :src="$wanlshop.oss(item.good.image)" mode="widthFix" style="width: 96rpx;height: 96rpx;"></image>
					<view class="income-right">
						<view class="income-left">
							<span class="inflow">{{ item.investment_cost ||'0.00' }}</span>
							<span class="effective">{{ item.num ||0 }}</span>
						</view>
						<!-- <span class="incomes-red" :class="{ 'incomes-green': green === index }">{{ item.money }}</span> -->
						<span class="incomes-green" >{{ item.revenueTotal||'0.00'}}</span>
					</view>
				</view>
			</view>
			<!-- 底部提示 -->
			<uni-load-more :status="status" :content-text="contentText" @clickLoadMore="lowerBottom" />
		</view>

	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				green: 2,
				data: [],
				current_page:1, //当前页码
				last_page: 1, //总页码
				status: 'more',
				contentText: {
					contentdown: '点击或上拉加载更多',
					contentrefresh: '疯狂加载中...',
					contentnomore: '没有更多了'
				},
			}
		},
		computed: {
		  ...mapState(['user', 'statistics','common'])
		},
		mounted() {
			this.getData()
		},
		onReachBottom() {
			this.lowerBottom()
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			//获取再投资金列表
			async getData(){
				const that = this
				await uni.request({
					url: '/income/income/re_list',
					method: 'GET',
					data:{
						user_id:that.user.id
					},
					success: res => {
					
						if (that.current_page === 1) {
							that.data = res.data.data;
						} else {
							that.data = that.data.concat(res.data.data);
						}
						that.current_page = res.data.current_page; //当前页码
						that.last_page = res.data.last_page; //总页码
						// 判断是否还有更多数据
						console.log(that.current_page < that.last_page);
						if (that.current_page < that.last_page) {
							that.status = 'more'; // 没有更多数据
						} else {
							that.status = 'noMore'; // 还有更多数据
						}
				
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.income {
		background-color: #FFFFFF;

		.box {
			background-color: #FFFFFF;

			// padding: 0 36rpx 0;
			.income-top {
				padding: 0 36rpx 0;
				height: 56rpx;
				background: #F7F7F7;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.text {
					height: 34rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #B1B1B1;
					line-height: 34rpx;
				}
			}

			.income-bottom {
				padding: 0 36rpx 0;
				background-color: #FFFFFF;
				min-height: 85vh;

				.income-list {
					margin-top: 26rpx;
					padding-bottom: 26rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #f1f1f1;

					.income-right {
						width: 76%;
						display: flex;
						justify-content: space-between;

						.income-left {

							width: 63%;
							display: flex;
							justify-content: space-between;

							.inflow {
								font-size: 28rpx;
								font-weight: bold;
								color: #1C1C1C;
								line-height: 32rpx;
							}

							.effective {
								font-size: 28rpx;
								font-weight: bold;
								color: #1C1C1C;
								line-height: 32rpx;
							}
						}

						.incomes-red {
							font-size: 28rpx;
							font-weight: bold;
							color: #E25740;
							line-height: 32rpx;
						}
					}

				}
			}
		}
	}

	.incomes-green {
		font-size: 28rpx;
		font-weight: bold;
		color: #28C445 !important;
		line-height: 32rpx;
	}
</style>